<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>5.姓名案例--computed语法</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <!-- <h1>{{age}}</h1>
            <input type="text" v-model="age">

            <hr> -->

            姓：<input type="text" v-model="firstName" /><br><br>
            名：<input type="text" v-model="lastName" /><br><br>
            <h1>全名：{{ fullName  }}</h1>

            <!-- <button v-on:click="change">点击更新全名  li - si</button> -->
        </div>
    </body>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                age:18,
                firstName:"zhang",
                lastName:"san"
            },
            methods:{
                change(){
                    this.fullName = "li-si";
                   
                }
            },
            computed:{  //计算属性
                /* fullName:{   //  计算属性完整写法
                    get(){
                        // console.log(this);
                        let {lastName,firstName} = this;
                        // 当有人读取 fullName 值时，get方法就会调用，且返回值就是fullName 的值。
                        console.log("当有人读取 fullName 值时，get方法就会调用，且返回值就是fullName 的值。");
                        return firstName[0].toUpperCase()+ firstName.slice(1) +"-"+lastName[0].toUpperCase()+ lastName.slice(1)
                    },
                    set(value){
                        //当有人 修改 fullname 值时，set 方法自动会被调用
                        console.log("当有人 修改 fullname 值时，set 方法自动会被调用")
                        // this.fullName = value;
                        // console.log(value);
                        let arr = value.split("-");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                } */
                //  计算属性简写
                fullName(){
                     // console.log(this);
                     let {lastName,firstName} = this;
                        // 当有人读取 fullName 值时，get方法就会调用，且返回值就是fullName 的值。
                    //console.log("当有人读取 fullName 值时，get方法就会调用，且返回值就是fullName 的值。");
                    
                    setTimeout(()=>{
                        return firstName[0].toUpperCase()+ firstName.slice(1) +"-"+lastName[0].toUpperCase()+ lastName.slice(1)
                    },1000)
                    
            
                    return firstName[0].toUpperCase()+ firstName.slice(1) +"-"+lastName[0].toUpperCase()+ lastName.slice(1)
                }
            }
           
        })

        // console.log(vm);
    </script>
</html>